import { Component } from '@angular/core'
import {
  IonicPage,
  NavController,
  NavParams,
  ViewController
} from 'ionic-angular'
import { QRScanner, QRScannerStatus } from '@ionic-native/qr-scanner'
import { MeseaminspectionworkdetailPage } from '../work/meseaminspectionworkdetail/meseaminspectionworkdetail'
import { HttpServicesProvider } from '../../providers/http-services/http-services'
/**
 * Generated class for the ScanPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */
@IonicPage()
@Component({
  selector: 'page-scan',
  templateUrl: 'scan.html'
})
export class ScanPage {
  light: boolean //判断闪光灯
  frontCamera: boolean //判断摄像头
  isShow: boolean = false //控制显示背景，避免切换页面卡顿
  callback
  inspectionPositionNum: string

  constructor(
    private navCtrl: NavController,
    private navParams: NavParams,
    private qrScanner: QRScanner,
    private viewCtrl: ViewController,
    private httpService: HttpServicesProvider
  ) {
    //默认为false
    this.light = false
    this.frontCamera = false
    this.callback = this.navParams.get('callback')
    this.inspectionPositionNum = this.navParams.get('x').inspectionPositionNum
  }

  ionViewDidLoad() {
    this.qrScanner
      .prepare()
      .then((status: QRScannerStatus) => {
        if (status.authorized) {
          // camera permission was granted
          // start scanning
          let scanSub = this.qrScanner.scan().subscribe((text: string) => {
            // alert(text)
            if (text) {
              let data = {
                inspectionWorkNum: this.navParams.get('x').inspectionWorkNum,
                inspectionPathNum: this.navParams.get('x').inspectionPathNum,
                inspectionStatus: this.navParams.get('x').inspectionStatus,
                inspectionPositionNum: text
              }
              this.qrScanner.hide() // hide camera preview
              scanSub.unsubscribe() // stop scanning
              if (this.inspectionPositionNum == text) {
                this.httpService.requestDataPost(
                  'app/inspectionwork/updateinspectionstate',
                  data,
                  {},
                  (status, datas) => {
                    if (status) {
                      alert(datas.msg)
                      if (datas.type) {
                        this.callback(data).then(() => {
                          this.navCtrl.pop()
                        })
                      } else {
                        this.navCtrl.pop()
                      }
                    }
                  }
                )
              } else {
                alert('选择的点位与当前扫描点位不一致，请核对后重新操作')
                this.navCtrl.pop()
              }
            }
          })

          // show camera preview
          this.qrScanner.show()

          // wait for user to scan something, then the observable callback will be called
        } else if (status.denied) {
          // camera permission was permanently denied
          // you must use QRScanner.openSettings() method to guide the user to the settings page
          // then they can grant the permission from there
        } else {
          // permission was denied, but not permanently. You can ask for permission again at a later time.
        }
      })
      .catch((e: any) => console.log('Error is', e))

    let elements = document.querySelectorAll('.tabbar')
    if (elements != null) {
      Object.keys(elements).map(key => {
        elements[key].style.display = 'none'
      })
    }
  }

  ionViewDidEnter() {
    //页面可见时才执行
    this.showCamera()
    this.isShow = true //显示背景
  }

  /**
   * 闪光灯控制，默认关闭
   */
  toggleLight() {
    if (this.light) {
      this.qrScanner.disableLight()
    } else {
      this.qrScanner.enableLight()
    }
    this.light = !this.light
  }

  /**
   * 前后摄像头互换
   */
  toggleCamera() {
    if (this.frontCamera) {
      this.qrScanner.useBackCamera()
    } else {
      this.qrScanner.useFrontCamera()
    }
    this.frontCamera = !this.frontCamera
  }

  showCamera() {
    ;(window.document.querySelector('ion-app') as HTMLElement).classList.add(
      'cameraView'
    )
  }
  hideCamera() {
    ;(window.document.querySelector('ion-app') as HTMLElement).classList.remove(
      'cameraView'
    )
    this.qrScanner.hide() //需要关闭扫描，否则相机一直开着
    this.qrScanner.destroy() //关闭
  }

  ionViewWillLeave() {
    this.hideCamera()
    let elements = document.querySelectorAll('.tabbar')
    if (elements != null) {
      Object.keys(elements).map(key => {
        elements[key].style.display = 'flex'
      })
    }
  }
}
